import 'package:flutter/gestures.dart';
import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: MyHomePage(title: 'Flutter Demo Home Page'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  MyHomePage({Key key, this.title}) : super(key: key);
  final String title;

  @override
  _MyHomePageState createState() => _MyHomePageState();
}

/*
注意： 当同时监听onTap和onDoubleTap事件时，当用户触发tap事件时，
会有200毫秒左右的延时，这是因为当用户点击完之后很可能会再次点击以触发双击事件，
所以GestureDetector会等一段时间来确定是否为双击事件。
如果用户只监听了onTap（没有监听onDoubleTap）事件时，则没有延时。
*/
class _MyHomePageState extends State<MyHomePage> {
  String _operation = 'No Gesture detected!'; //保存事件名
  double _top = 0;
  double _left = 0;
  double _height = 400;
  Color _textColor = Colors.white;
  TapGestureRecognizer _tapGestureRecognizer = new TapGestureRecognizer();

  void updateText(String text) {
    setState(() {
      _operation = text;
    });
  }

  @override
  void dispose() {
    //用到GestureRecognizer的话一定要调用其dispose方法释放资源
    _tapGestureRecognizer.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return Scaffold(
      appBar: AppBar(title: Text(widget.title)),
      body: Center(
        child: GestureDetector(
          child: Container(
              color: Colors.blue,
              width: double.infinity,
              height: _height,
              child: new Stack(
                children: <Widget>[
                  Positioned(
                    top: 20,
                    left: 50,
                    // child: Text(_operation,
                    //     style: TextStyle(fontSize: 15, color: Colors.white)),
                    child: Text.rich(TextSpan(children: [
                      TextSpan(
                          text: _operation,
                          style: TextStyle(fontSize: 16, color: Colors.white)),
                      TextSpan(
                          text: ' 点我变色',
                          style: TextStyle(fontSize: 30, color: _textColor),
                          recognizer: _tapGestureRecognizer
                            ..onTap = () {
                              setState(() {
                                _textColor = _textColor == Colors.white ? Colors.orange : Colors.white;
                              });
                            }),
                    ])),
                  ),
                  Positioned(
                    top: _top,
                    left: _left,
                    child: GestureDetector(
                      child: CircleAvatar(
                        child: Text('A'),
                      ),
                      //手指按下时会触发此回调
                      onPanDown: (DragDownDetails e) {
                        //打印手指按下的位置(相对于屏幕)
                        print("用户手指按下：${e.globalPosition}");
                      },
                      //手指滑动时会触发此回调
                      onPanUpdate: (DragUpdateDetails e) {
                        //用户手指滑动时，更新偏移，重新构建
                        setState(() {
                          _left += e.delta.dx;
                          _top += e.delta.dy;
                        });
                      },
                      //单一方向滑动
                      // onVerticalDragUpdate: (DragUpdateDetails e) {
                      //   setState(() {
                      //     _top += e.delta.dy;
                      //   });
                      // },
                      onPanEnd: (DragEndDetails e) {
                        //滑动结束，打印x,y轴的速度
                        print(e.velocity);
                      },
                    ),
                  )
                ],
              )),
          onTap: () => updateText('Tap'),
          onDoubleTap: () => updateText('DouleTap'),
          onLongPress: () => updateText('LongPress'),
          onScaleUpdate: (ScaleUpdateDetails e) {
            setState(() {
              //缩放倍数在0.8到10倍之间
              _height = 400 * e.scale.clamp(.8, 10);
            });
          },
        ),
      ),
    );
  }
}
